<!--
 * @Description: 黑暗料理
 * @Author: ZhangHan
 * @Date: 2025-08-27 16:34:57
 * @LastEditTime: 2025-09-16 08:52:48
 * @LastEditors: ZhangHan
-->
<template>
  <view class="darkfood">
    <view class="head"> 创造终极黑暗料理 </view>
    <view class="secondhead">选择最不搭的食材，组合出最难吃的料理！</view>
    <view class="card">
      <view class="title">食材</view>
      <uni-data-checkbox
        mode="button"
        multiple
        v-model="ingredientBox"
        :localdata="ingredient"
        selectedColor="#8B0000"
      ></uni-data-checkbox>
    </view>
    <view class="card">
      <view class="title">口味</view>
      <uni-data-checkbox
        mode="button"
        multiple
        v-model="tasteBox"
        :localdata="taste"
        selectedColor="#8B0000"
      ></uni-data-checkbox>
    </view>
    <view class="card">
      <view class="title">调料</view>
      <uni-data-checkbox
        mode="button"
        multiple
        v-model="seasoningBox"
        :localdata="seasoning"
        selectedColor="#8B0000"
      ></uni-data-checkbox>
    </view>
    <view class="card">
      <view class="title">烹饪方式</view>
      <uni-data-checkbox
        mode="button"
        :max="1"
        multiple
        v-model="cookingMethodBox"
        :localdata="cookingMethod"
        selectedColor="#8B0000"
      ></uni-data-checkbox>
    </view>
    <view class="submit" @click="handleGenerate()">灵魂之子，浇给</view>
  </view>
  <view>
    <!-- 普通弹窗 -->
    <uni-popup ref="popup" background-color="#fff8e7">
      <view class="popup-content" v-if="info">
        <view class="label">料理名称：</view>
        <view class="desc">{{ info?.dishName }}</view>
        <view class="label">评分：</view>
        <view class="desc">{{ info?.score }}</view>
        <view class="label">材料：</view>
        <view class="desc">{{ info?.selected?.ingredients.join("、") }}</view>
        <view class="desc">{{ info?.selected?.tastes.join("、") }}</view>
        <view class="desc">{{ info?.selected?.seasonings.join("、") }}</view>
        <view class="label">味道：</view>
        <view class="desc">{{ info?.tasteDescription }}</view>
        <view class="label">恶心程度：</view>
        <view class="desc">{{ info?.disgustLevel }}</view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ingredient, taste, seasoning, cookingMethod } from "./data";

const ingredientBox = ref<any[]>([]);
const tasteBox = ref<any[]>([]);
const seasoningBox = ref<any[]>([]);
const cookingMethodBox = ref<any[]>([]);
const popup = ref<any>();
const info = ref<any>();

// 生成结果数据的函数
const generateResultData = () => {
  // 1. 收集选中的项
  const selected = {
    ingredients: ingredient
      .filter((item) => ingredientBox.value.includes(item.value))
      .map((item) => item.text),
    tastes: taste
      .filter((item) => tasteBox.value.includes(item.value))
      .map((item) => item.text),
    seasonings: seasoning
      .filter((item) => seasoningBox.value.includes(item.value))
      .map((item) => item.text),
    cookingMethods: cookingMethod
      .filter((item) => cookingMethodBox.value.includes(item.value))
      .map((item) => item.text),
  };

  // 2. 生成料理名称的随机组合元素
  const namePrefixes = [
    "腐烂的",
    "发霉的",
    "臭烘烘的",
    "令人作呕的",
    "过期的",
    "变质的",
  ];
  const nameMiddles = ["地狱", "魔鬼", "噩梦", "禁忌", "黑暗", "死亡"];
  const nameSuffixes = ["混合物", "大乱炖", "灾难", "怪味汤", "糊糊", "料理"];

  // 3. 生成味道描述的随机元素
  const adj1 = [
    "酸掉牙的",
    "苦到哭的",
    "咸死人的",
    "甜到齁的",
    "辣到炸的",
    "臭翻天的",
  ];
  const adj2 = [
    "令人窒息的",
    "闻着就吐的",
    "难以下咽的",
    "怀疑人生的",
    "生不如死的",
    "挑战极限的",
  ];
  const descriptions = [
    "入口即吐，回味悠长（指恶心感）",
    "吃完感觉灵魂都被污染了",
    "这味道，永生难忘（绝对不想再体验）",
    "仿佛在吃化学废料混合体",
    "味蕾受到了前所未有的侮辱",
    "建议直接倒入下水道，不要折磨自己",
  ];

  // 4. 随机组合生成结果
  const random = (arr: any) => arr[Math.floor(Math.random() * arr.length)];

  return {
    // 料理名称
    dishName: `${random(namePrefixes)}${random(nameMiddles)}${random(
      nameSuffixes
    )}`,

    // 选中的材料
    selected,

    // 恶心程度 (根据选择数量计算)
    disgustLevel: Math.min(
      5,
      Math.floor(
        (selected.ingredients.length +
          selected.tastes.length +
          selected.seasonings.length +
          selected.cookingMethods.length) /
          2
      ) + 1
    ),

    // 味道描述
    tasteDescription: `${random(adj1)}且${random(adj2)}，${random(
      descriptions
    )}`,

    // 评分 (越低越难吃)
    score: Math.max(
      1,
      10 - (selected.ingredients.length + selected.tastes.length) * 1.5
    ),
  };
};

// 使用示例
const handleGenerate = () => {
  // 验证是否有选择
  if (
    ingredientBox.value.length === 0 &&
    tasteBox.value.length === 0 &&
    seasoningBox.value.length === 0 &&
    cookingMethodBox.value.length === 0
  ) {
    uni.showToast({
      title: "请至少选择一项",
      icon: "error",
    });
    return;
  }

  // 生成结果数据
  const result = generateResultData();
  info.value = result;


  popup.value.open("bottom");
};
</script>

<style scoped lang="scss">
@use "./index.scss";

</style>
